<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				margin-top: 10px;
			}
			#box li{
				width: 200px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				float: left;
			}
		</style>
	</head>
	
	<body>
		<ul id="box">
			
		</ul>
		<script>		
        var oBox = document.getElementById('box');
        var num =0;
        var timer = setInterval(function(){
        	var li = document.createElement('li');
        	var color = rgba();
        	
        	li.innerHTML = color;
        	
        	li.style.background = color;
        	
        	oBox.appendChild(li);
        	num++;
        	if (num>500) {
        		clearInterval(timer);
        	}
        },1000)
        
        function rgba(){
           var arr = [];
            for(var i=0;i<100;i++ ){
                arr[i] = Math.floor( Math.random()*256 );
            }
            arr[3] = (Math.random()*1).toFixed(1);
            return 'rgba('+arr[0]+','+arr[1]+','+arr[2]+','+arr[3]+')';
        }
		</script>
	</body>
</html>
